<template>
<h2>统计报表</h2>
<div ref="panel" class="chart"></div>

</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted,ref,reactive} from 'vue'
import axios from '../axios/index.js'

let panel=ref(null)
onMounted(async()=>{
      //远程获取报表数据
       let d=await axios.get("/report")
       let ary=d.data.data;
       //根据报表中对数据的要求，分解好数据
     /*  
       let xx=ary.map((ele=>{return ele.type}))
       let yy=ary.map((ele=>ele.value))
    */
       /*let xx=[]
       let yy=[]
      
       for(let i=0;i<ary.length;i++){
          xx.push(ary[i].type);
          yy.push(ary[i].value)
       }
    */

     //加载图表数据
       var myChart = echarts.init(panel.value);

        myChart.setOption({
        title: {
            text: '分类统计'
        },
        tooltip: {},
        xAxis: {
            data: ary.map((x=>{return x.type}))
        },
        yAxis: {},
        series: [
            {
            name: '销量',
            type: 'bar',
            data: ary.map((x=>{return x.value}))
            }
        ]
        });
});

</script>
<style scoped>
.chart{
    width:500px;
    height:500px;
    margin:20px auto;
    border:1px solid #ccc
}
</style>